<template>
  <a-form-model
    ref="form"
    :model="form"
    :rules="formRules"
    :hideRequiredMark="title == '详情'"
  >
    <div class="form-content">
      <a-row>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="钢筋牌号：" prop="brand">
            <a-select
              placeholder="请选择钢筋牌号"
              v-model="form.brand"
              :disabled="title == '详情'"
            >
              <a-select-option :value="v" v-for="(v, i) in brandsList" :key="i">
                {{ v }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="公称直径：" prop="nominalDiameter">
            <a-select
              placeholder="请选择公称直径"
              v-model="form.nominalDiameter"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v.dicValue"
                v-for="v in nominalDiametersList"
                :key="v.id"
              >
                {{ v.dicDesc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="试验依据：">
            <a-input
              placeholder="请输入试验依据"
              v-model="form.trialBasis"
              :disabled="title == '详情'"
              :maxLength="100"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="钢筋品种：" prop="steelType">
            <a-select
              allowClear
              placeholder="请选择钢筋品种"
              v-model="form.steelType"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v.dicValue"
                v-for="v in steelTypesList"
                :key="v.id"
              >
                {{ v.dicDesc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="焊接方法：">
            <a-input
              placeholder="请选择焊接方法"
              v-model="form.weldMethod"
              :disabled="title == '详情'"
              :maxLength="50"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="钢筋级别：">
            <a-input
              placeholder="请输入钢筋级别"
              v-model="form.level"
              :disabled="title == '详情'"
              :maxLength="50"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="生产厂家：">
            <a-input
              placeholder="请输入生产厂家"
              v-model="form.produceCompany"
              :disabled="title == '详情'"
              :maxLength="50"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="批量：">
            <a-input
              placeholder="请输入批量"
              v-model="form.batch"
              :disabled="title == '详情'"
              :maxLength="50"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="钢绞线结构：">
            <a-input
              placeholder="请输入钢绞线结构"
              v-model="form.steelStrand"
              :disabled="title == '详情'"
              :maxLength="50"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="焊接人：">
            <a-input
              placeholder="请输入焊接人"
              v-model="form.weldMan"
              :disabled="title == '详情'"
              :maxLength="50"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="焊接长度：">
            <a-input
              placeholder="请输入焊接长度"
              v-model="form.weldLength"
              :disabled="title == '详情'"
              :maxLength="50"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
    </div>
  </a-form-model>
</template>
<script>
import { trialInfo } from "@/api/wisdom-beam/trial-app";
export default {
  props: ["title", "trialNum"],
  watch: {
    trialNum: {
      handler(val) {
        if (val) {
          this.trialInfo();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      form: {
        brand: undefined, //钢筋牌号
        nominalDiameter: undefined, //公称直径
        trialBasis: "", //试验依据
        steelType: undefined, //钢筋品种
        weldMethod: undefined, //焊接方法
        level: "", //钢筋级别
        produceCompany: "", //生产厂家
        batch: "", //批量
        steelStrand: "", //钢绞线结构
        weldMan: "", //焊接人
        weldLength: "", //焊接长度
      },
      formRules: {
        brand: [
          {
            required: true,
            message: "请选择钢筋牌号",
            trigger: "change",
          },
        ],
        nominalDiameter: [
          {
            required: true,
            message: "请选择公称直径",
            trigger: "change",
          },
        ],
      },
      brandsList: [],
      nominalDiametersList: [],
      steelTypesList: [],
    };
  },
  mounted() {
    this.form = {
      brand: undefined, //钢筋牌号
      nominalDiameter: undefined, //公称直径
      trialBasis: "", //试验依据
      steelType: undefined, //钢筋品种
      weldMethod: undefined, //焊接方法
      level: "", //钢筋级别
      produceCompany: "", //生产厂家
      batch: "", //批量
      steelStrand: "", //钢绞线结构
      weldMan: "", //焊接人
      weldLength: "", //焊接长度
    };
  },
  methods: {
    validateHandle() {
      let status = "";
      this.$refs["form"].validate((val) => {
        if (val) {
          status = true;
        } else {
          status = false;
        }
      });
      return status;
    },
    // 试验信息
    trialInfo() {
      trialInfo({
        trialNum: this.trialNum,
      })
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.brandsList = result.brands || [];
          this.nominalDiametersList = result.nominalDiameters || [];
          this.steelTypesList = result.steelTypes || [];
        })
        .catch((_) => {});
    },
  },
};
</script>
<style lang="less" scoped>
.form-content {
  padding: 0 120px 0 20px;
}
/deep/.ant-form-item {
  display: flex;
  .ant-form-item-label {
    width: 160px;
    min-width: 160px;
    white-space: pre-wrap;
    display: flex;
    justify-content: flex-end;
    line-height: 20px;
    align-items: center;
    height: 36px;
    label {
      color: #999999;
    }
  }
  .check-item-select {
    height: 126px;
    .ant-select-selection__rendered {
      height: 126px;
      .ant-select-selection__placeholder {
        margin-top: -40px !important;
      }
    }
  }
  .ant-form-item-control-wrapper {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
/deep/.ant-calendar-picker {
  width: 100%;
  min-width: unset !important;
}
</style>
